<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<script src="../../js/jquery.min.js"></script>
		<style type="text/css">
			.mui-row.mui-fullscreen>[class*="mui-col-"] {height: 100%;}
			.mui-col-xs-3,.mui-col-xs-9 {overflow-y: auto;height: 100%;}
			.mui-segmented-control .mui-control-item {line-height: 50px;width: 100%;}
			.mui-control-content {display: block;}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {background-color: #fff;}
			/*add*/
			.mui-search{clear: none;overflow: initial;width: 80%;text-align: center;}
			 img.freeImg{line-height: 100px !important;max-width: 150px !important;height: 100px !important;}
	    	 p.freeDes{white-space: normal !important;}
	    	 a.hisList {background-color: #35d0c9;color: #fff;padding: 4px;border-radius: 50px;margin: 4px;}
			 .history{padding: 10px;}
			 a.mui-control-item.mui-active {color: #fff !important;background-color: #35d0c9 !important;}
             .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item, .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active{
             	border-bottom: none;border-bottom-right-radius: 50px;border-top-right-radius: 50px;}
             input[type=search]{background-color: #fff !important;}
             .mui-search .mui-placeholder{color:#35D0C9 !important;}
             .mui-icon-search:before {color: #35d0c9;}
             .mui-icon-back:before, .mui-icon-left-nav:before{color: #fff;}
             .mui-bar.mui-bar-nav{background-color:#35D0C9;}
		</style>
		<script src="../../js/mui.min.js" type="text/javascript"></script>
		<script src="../../js/us/URL.js" type="text/javascript"></script>
	</head>

	<body>
		<div class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left mui-action-back" id="goBcak" href="home.html"></a>
			<div class="mui-input-row mui-search mui-pull-right" >
    			<input type="search" class="mui-input-clear" placeholder="搜索目的地" id="search">
			</div>
		</div>
		<div class="mui-content mui-row mui-fullscreen" style="margin-top: 44px;" id="contentList">
			<div class="mui-col-xs-3" style="background-color: #fff;">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
				</div>
			</div>
			<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
			</div>
		</div>
		<!--推荐   test s-->
		<div class="tuijian mui-content" style="display: none;margin-top: 44px;">
			<div class="history" id="history">
				<a class="hisList">历史记录</a>
			</div>
			<div class="recommend">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
					    <a class="mui-navigate-right">
					            Item 1
					    </a>
					</li>
					<li class="mui-table-view-cell">
					    <a class="mui-navigate-right">
					            Item 2
					    </a>
					</li>
					<li class="mui-table-view-cell">
					    <a class="mui-navigate-right">
					            Item 3
					    </a>
					</li>
				</ul>
			</div>
		</div>
	</body>

</html>
<script type="text/javascript">
	//模拟,待确认
			$("#search").focus(function(){
				$("#contentList").css("display","none");
				$(".tuijian").css("display","block");
				var span = document.createElement('span');
				document.getElementById("search").addEventListener("keydown",function(e){ 
				    if(13 == e.keyCode){ //点击了“搜索”  
                        var text=$(this).val();
                        var span=document.createElement("a");
                        span.className="hisList";
                        span.innerText=text;
                        document.getElementById("history").appendChild(span);
				     }
    			},false); 
				if($(".tuijian").css("display")==="block"){
                  $("#goBcak").click(function(){
                  	$("#contentList").css("display","block");
                  	$(".tuijian").css("display","none");
                  });
				}
			});
		</script>
		<script type="text/javascript">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			var controls = document.getElementById("segmentedControls");
			var contents = document.getElementById("segmentedControlContents");
			var html = [];
			var i = 1,
				j = 1,
				m = 16, //左侧选项卡数量+1
				n = 21; //每个选项卡列表数量+1
			var data = {column: "id,post_id,title,author_name,cover,published_at" }//需要的字段名
			mui.getJSON(testUrl.news,data,function(res){
			 //左侧信息   s
			var select=['猜你喜欢','江浙沪','最美西南','精彩华南','美丽华北','畅游华中','醉人东北','壮丽西北',
				'山东安徽','福建江西','港澳台','玩转日本','东南亚','欧美澳'];
				for(var l=0;l<select.length;l++){
					html.push('<a class="mui-control-item" data-index="' + l + '" href="#content' + l + '">' + select[l] + '</a>');
				}
				controls.innerHTML = html.join('');
				html = [];
				//左侧信息  e
				//右侧信息   s
			 	for(var i=0;i<select.length;i++){
			 		html.push('<div id="content' + i + '" class="mui-control-content"><ul class="mui-table-view">');
			 		for(var j=0;j<res.length;j++){
			 			var imgList=res[j].cover;
			 			html.push('<li class="mui-table-view-cell">'+
					'<a>'+
				            '<img class="mui-media-object mui-pull-right freeImg" src="' + imgList + '">'+
				            '<div class="mui-media-body">'+
				                 '2000元/人'
				                +'<p class="mui-ellipsis freeDes">'+'我是第'+i+'个选项卡的第'+j+'个描述信息'+'</p>'+
				            '</div>'+
				        '</a>'
					+ '</li>');
			 		}
			 		html.push('</ul></div>');
			 	}
                   	contents.innerHTML = html.join('');
                   	controls.querySelector('.mui-control-item').classList.add('mui-active');
				//右侧信息end
                   	aa();
            });
				//默认选中第一个
			function aa() {
				var controlsElem = document.getElementById("segmentedControls");
				var contentsElem = document.getElementById("segmentedControlContents");
				var controlListElem = controlsElem.querySelectorAll('.mui-control-item');
				var contentListElem = contentsElem.querySelectorAll('.mui-control-content');
				var controlWrapperElem = controlsElem.parentNode;
				var controlWrapperHeight = controlWrapperElem.offsetHeight;
				var controlMaxScroll = controlWrapperElem.scrollHeight - controlWrapperHeight;//左侧类别最大可滚动高度
				var maxScroll = contentsElem.scrollHeight - contentsElem.offsetHeight;//右侧内容最大可滚动高度
				var controlHeight = controlListElem[0].offsetHeight;//左侧类别每一项的高度
				var controlTops = []; //存储control的scrollTop值
				var contentTops = [0]; //存储content的scrollTop值
				var length = contentListElem.length;
				for (var i = 0; i < length; i++) {
					controlTops.push(controlListElem[i].offsetTop + controlHeight);
				}
				for (var i = 1; i < length; i++) {
					var offsetTop = contentListElem[i].offsetTop;
					if (offsetTop + 100 >= maxScroll) {
						var height = Math.max(offsetTop + 100 - maxScroll, 100);
						var totalHeight = 0;
						var heights = [];
						for (var j = i; j < length; j++) {
							var offsetHeight = contentListElem[j].offsetHeight;
							totalHeight += offsetHeight;
							heights.push(totalHeight);
						}
						for (var m = 0, len = heights.length; m < len; m++) {
							contentTops.push(parseInt(maxScroll - (height - heights[m] / totalHeight * height)));
						}
						break;
					} else {
						contentTops.push(parseInt(offsetTop));
					}
				}
				contentsElem.addEventListener('scroll', function() {
					var scrollTop = contentsElem.scrollTop;
					for (var i = 0; i < length; i++) {
						var offsetTop = contentTops[i];
						var offset = Math.abs(offsetTop - scrollTop);
						if (scrollTop < offsetTop) {
							if (scrollTop >= maxScroll) {
								onScroll(length - 1);
							} else {
								onScroll(i - 1);
							}
							break;
						} else if (offset < 20) {
							onScroll(i);
							break;
						}else if(scrollTop >= maxScroll){
							onScroll(length - 1);
							break;
						}
					}
				});
				var lastIndex = 0;
				//监听content滚动
				var onScroll = function(index) {
					if (lastIndex !== index) {
						lastIndex = index;
						var lastActiveElem = controlsElem.querySelector('.mui-active');
						lastActiveElem && (lastActiveElem.classList.remove('mui-active'));
						var currentElem = controlsElem.querySelector('.mui-control-item:nth-child(' + (index + 1) + ')');
						currentElem.classList.add('mui-active');
						//简单处理左侧分类滚动，要么滚动到底，要么滚动到顶
						var controlScrollTop = controlWrapperElem.scrollTop;
						if (controlScrollTop + controlWrapperHeight < controlTops[index]) {
							controlWrapperElem.scrollTop = controlMaxScroll;
						} else if (controlScrollTop > controlTops[index] - controlHeight) {
							controlWrapperElem.scrollTop = 0;
						}
					}
				};
				//滚动到指定content
				var scrollTo = function(index) {
					contentsElem.scrollTop = contentTops[index];
				};
				mui(controlsElem).on('tap', '.mui-control-item', function(e) {
					scrollTo(this.getAttribute('data-index'));
					return false;
				});
			}
		</script>